<script setup lang="ts">
import ThreePlus from "./index";
import * as THREE from "three";

import { getStorage, setStorage, clearStorage, removeStorage } from '~/composables/storage'

const userStore = useUserStore()
const router = useRouter()

const form = reactive({
  userName: '',
  passWord: '',
  isLine: false,
  isPassWord: false
})


const initPage = () => {
  let T = getStorage('form')
  console.log(T)
  if (T) {
    Object.keys(form).forEach(v => form[v] = T[v])
  }
}
initPage()


const eyeType = ref(false)

const changeIsL = (e) => {
  setStorage('isLine', e)
  form.isLine = e
  if (form.isPassWord) {
    setStorage('form', form)
  }
}
const changeIsPW = (e) => {
  form.isPassWord = e

  if (e) {
    setStorage('form', form)
  } else {
    // clearStorage()
    removeStorage('form')
  }
}

const ruse1 = ref(false)
const ruse2 = ref(false)

const tapLogin = () => {
  if (form.userName == '') {
    return ruse1.value = true
  }
  if (form.passWord == '') {
    return ruse2.value = true
  }


  if (form.isPassWord) {
    setStorage('form', form)
  } else {
    removeStorage('form')
  }

  setStorage('isLine', form.isLine)

  let Q = {
    account: form.userName,
    password: form.passWord,
  }
  adminLogin(Q).then(res => {
    userStore.token = res.result.token
    userStore.userInfo = res.result
    let url = res.result.auth == 1 ? '/dataManagement' : '/alarmApparatus'
    setTimeout(() => {
      router.push(url)
    }, 300)
  })

}

const changeInput1 = (e) => {
  if (e) {
    ruse1.value = false
  }
}
const changeInput2 = (e) => {
  if (e) {
    ruse2.value = false
  }
}

// three
const threePlus = ref(null)
const canvas = ref(null)

onMounted(() => {
  threePlus.value = new ThreePlus(".map_box");
  canvas.value = threePlus.value.renderer.domElement


  // THREE.DefaultLoadingManager.onProgress = function (item, loaded, total) {
  //   console.log("进度:", new Number((loaded / total) * 100).toFixed(2));
  //   if (new Number((loaded / total) * 100).toFixed(2) == 100) {
  //     LoadingProgress.value = false
  //   }
  // };


})

</script>

<template>
  <div class="flex xmx_content ">
    <div class="w-[67.7%] right_box   pl-[150px] xwmd:(pt-[7vh]) xwlg:(pt-[3vh]) " style="pointer-events: none;">
      <div>
        <img class="w-[232px] " src="../../assets/logo.png" alt="">
      </div>
      <div class="logo_name my-[36px]">
        油品状态监测管理平台
      </div>
      <div class="map_box w-[76.9%] h-[60.9%] xwmd:(mt-[200px]) xwlg:(mt-[0px])" ref="sceneDiv">
        <!-- <img class="w-[76.9%] h-[60.9%]" src="https://picsum.photos/1000/597" alt=""> -->
      </div>


    </div>
    <div class="flex-1 flex flex-col justify-center items-center" style="background-color: #f3f7f7;">
      <div class="mx-auto text-[46px] leading-[54px] mb-[81px]" style="font-weight: 500;">账号登录</div>

      <div class="w-[67.7%] mx-auto">

        <div class="py-[14px] px-[8px] h-[125px] flex flex-col mb-[42px]">
          <div class="text-[32px]" style="font-weight: 500;">账号</div>
          <div class="pb-[11px] pt-[2px] flex flex-1" style='border-bottom: 2px solid #969C94;'>
            <input @change="changeInput1" v-model="form.userName" placeholder="请输入" class="flex-1 h-[40px] mt-auto"
              type="text">
            <div class="w-[46px] h-[46px]">
              <img class="w-full h-full" src="../../assets/login/eye.png" alt="">
            </div>
          </div>

          <div class="text-red-500 mt-[10px]" :style="{ 'visibility': ruse1 ? 'visible' : 'hidden' }">
            请输入账号
          </div>
        </div>



        <div class="py-[14px] px-[8px] h-[125px] flex flex-col">
          <div class="text-[32px]" style="font-weight: 500;">密码</div>
          <div class="pb-[11px] pt-[2px] flex flex-1" style='border-bottom: 2px solid #969C94;'>
            <input @change="changeInput2" :type="eyeType ? 'text' : 'password'" v-model="form.passWord" placeholder="请输入"
              class="flex-1 h-[40px] mt-auto">
            <div class="w-[46px] h-[46px]">
              <img @click="eyeType = false" v-if="eyeType" class="w-full h-full" src="../../assets/login/ren1.png" alt="">
              <img @click="eyeType = true" v-else class="w-full h-full" src="../../assets/login/ren.png" alt="">
            </div>
          </div>

          <div class="text-red-500 mt-[10px]" :style="{ 'visibility': ruse2 ? 'visible' : 'hidden' }">
            请输入密码
          </div>
        </div>






        <div class="flex justify-between mt-[28px]">
          <div class="flex items-center">
            <img class="w-[28px] h-[28px] cursor-pointer" @click="changeIsL(false)" v-if="form.isLine"
              src="../../assets/login/true.png" alt="">
            <img class="w-[28px] h-[28px] cursor-pointer" @click="changeIsL(true)" v-else
              src="../../assets/login/kong.png" alt="">
            <span class="ml-[10px] text-[20px]">
              离线登录
            </span>
          </div>

          <div class="flex items-center">
            <img class="w-[28px] h-[28px] cursor-pointer" @click="changeIsPW(false)" v-if="form.isPassWord"
              src="../../assets/login/true.png" alt="">
            <img class="w-[28px] h-[28px] cursor-pointer" @click="changeIsPW(true)" v-else
              src="../../assets/login/kong.png" alt="">
            <span class="ml-[10px] text-[20px]">
              记住密码
            </span>
          </div>

        </div>





      </div>



      <div class="mt-[161px] rounded-[18px] w-[528px] h-[65px] btn flex justify-center items-center cursor-pointer"
        style="background: #00AB63;" @click="tapLogin">
        登录
      </div>


    </div>
  </div>
</template>

<style scoped>
.right_box {
  background: linear-gradient(170deg, #0C8C54 0%, #23965F 40%, #2D8B7C 72%, #197883 100%);
  box-shadow: 31px 54px 143px 0px #BACCD6;
  border-radius: 0px 0px 0px 0px;
}

input {
  border: none;
  background-color: #f3f7f7;
  font-size: 20px;
}

input:focus {
  outline: none;
}

input::placeholder {
  font-size: 20px;
  color: #909090;

}

.btn {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 700;
  font-size: 30px;
  color: #FFFFFF;
  line-height: 0px;
  letter-spacing: 12px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}

.logo_name {
  font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
  font-weight: 400;
  font-size: 42px;
  color: #FFFFFF;
  line-height: 49px;
  text-align: left;
  font-style: normal;
  text-transform: none;
}
</style>
